{% extends "base-left.html" %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
{% endblock %}

{% block content %}

    <!-- Main content -->
    <section class="content">
        <div id="devlist">
            <div class="box box-primary" id="liebiao">
                <div class="box-header">
                    <div class="btn-group pull-left">
                        <button type="button" id="btnRefresh" class="btn btn-default">
                            <i class="glyphicon glyphicon-repeat"></i>刷新
                        </button>
                    </div>

                    <div class="btn-group pull-left">&nbsp;</div>
                    <div class="btn-group pull-left">
                        <button type="button" id="btnCreate" class="btn btn-primary">
                            <i class="glyphicon glyphicon-plus"></i>新增
                        </button>
                    </div>

                    <div class="btn-group pull-left">&nbsp;</div>
                    <div class="btn-group pull-left">
                        <button type="button" id="btnDelete" class="btn btn-danger">
                            <i class="glyphicon glyphicon-trash"></i>删除
                        </button>
                    </div>

                    <div class="btn-group pull-left">&nbsp;</div>
                    <div class="btn-group pull-left">
                        <button type="button" id="btnEnable" class="btn btn-default">
                            <i class="glyphicon glyphicon-ok-circle"></i>启用
                        </button>
                        <button type="button" id="btnDisable" class="btn btn-default">
                            <i class="glyphicon glyphicon-ban-circle"></i>禁用
                        </button>
                    </div>

                    <div class="btn-group pull-right">
                        <form class="form-inline">
                            <div class="form-group">
                                <label>用户状态:</label>
                                <select id="select" name="select" class="form-control">
                                    <option style="text-align:center" value="">---所有---</option>
                                    <option value="True">启用</option>
                                    <option value="False">禁用</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="box-body">
                    <table id="dtbList" class="display" cellspacing="0" width="100%">
                        <thead>
                            <tr valign="middle">
                                <th><input type="checkbox" id="checkAll"> </th>
                                <th>ID</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>手机</th>
                                <th>邮箱</th>
                                <th>部门</th>
                                <th>职位</th>
                                <th>上级</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <br><br>
                </div>
            </div>
        </div>

    </section>

    <!-- /.content -->

{% endblock %}


{% block javascripts %}
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
    <script src="{% static 'js/plugins/layer/layer.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            $("#SYSTEM-BASIC").addClass('active');
            $("#SYSTEM-BASIC-USER").addClass('active');
        });
    </script>
    <script type="text/javascript">
        var oDataTable=null;
        $(function () {
            oDataTable=initTable();
            function initTable() {
                var oTable=$('#dtbList').DataTable($.extend(true,{},
                DATATABLES_CONSTANT.DATA_TABLES.DEFAULT_OPTION,
                    {
                        ajax:{
                            'url':'{% url 'system:basic-user-list' %}',
                            'data':function (d) {
                                d.select=$('#select').val();
                            }
                        },
                        columns:[
                            DATATABLES_CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
                            {
                                data:'id',
                                width:'5%',
                            },
                            {
                                data:'name',
                                width:'10%',
                            },
                            {
                                data:'gender',
                                width:'10%',
                                render:function (data,type,row,meta) {
                                    if(data=='male'){
                                        return '男';
                                    } else {
                                        return '女';
                                    }
                                }
                            },
                            {
                                data:'mobile',
                            },
                            {
                                data:'email',
                            },
                            {
                                data:'department__name',
                            },
                            {
                                data:'post',
                            },
                            {
                                data:'superior__name',
                            },
                            {
                                data:'is_active',
                                render:function (data) {
                                    if (data==true){
                                        return '启用';
                                    } else {
                                        return '禁用';
                                    }
                                }
                            },
                            {
                                data:'id',
                                width:'12%',
                                bSortable:'false',
                                render:function (data,type,row,meta) {
                                    var ret="";
                                    var ret="<button title='详情-编辑' onclick='doUpdate("
                                        + data + ")'><i class='glyphicon glyphicon-pencil'></i></button>";
                                    ret=ret + "<button name='btnChangepasswd' title='修改密码' onclick='doChangepasswd("
                                         + data + ")'><i class='glyphicon glyphicon-asterisk'></i></button>";
                                    ret=ret + "<button name='btnDelete' title='删除' onclick='doDelete("
                                         + data + ")'><i class='glyphicon glyphicon-trash'></i></button>";
                                    return ret;
                                }
                            }
                        ],
                        order:[
                            [2,'desc']
                        ],
                    }));
                return oTable;
            }
        });
    </script>

    <script type="text/javascript">
        $("#btnCreate").click(function () {
            var div=layer.open({
                type:2,
                title:'新增',
                shadeClose:false,
                maxmin:true,
                area:['800px','720px'],
                content:'{% url 'system:basic-user-create' %}',
                end:function () {
                    oDataTable.ajax.reload();
                }
            });
            {#layer.full(div)#}
        });

        function doUpdate(id) {
            var div=layer.open({
                type:2,
                title:'编辑',
                shadeClose:false,
                maxmin:true,
                area:['800px','720px'],
                content:["{% url 'system:basic-user-detail' %}"+'?id='+id,'no'],
                end:function () {
                    oDataTable.ajax.reload();
                }
            });

        }

        function doChangepasswd(id) {
            layer.open({
               type:2,
               title:'修改密码',
               shadeClose:false,
               maxmin:true,
               area:['850px','350px'],
               content:["{% url 'system:basic-user-password_change' %}"+'?id='+id,'no'],
               end:function () {
                   oDataTable.ajax.reload();
               }
            });
        }

        $("#checkAll").on('click',function () {
           if ($(this).prop("checked")===true ) {
               $("input[name='checkList']").prop("checked",$(this).prop("checked"));
               $('#example tbody tr').addClass("selected");
           } else {
               $("input[name='checkList']").prop("checked",false);
               $('#example tbody tr').removeClass("selected");
           }
        });

        $("#btnDelete").click(function () {
           if ($("input[name='checkList']:checked").length==0) {
               layer.msg('请选择要删除的记录');
               return ;
           }
           var arrID=new Array();
           $("input[name='checkList']:checked").each(function () {
               arrID.push($(this).val());
           });
           sId=arrID.join(',');
           layer.alert('确定要删除吗',{
               title:'提示',
               icon:3,
               time:0,
               btn:["YES","NO"],
               yes:function (index) {
                   layer.close(index);
                   $.ajax({
                      type:'POST',
                      url:"{% url 'system:basic-user-delete' %}",
                      data:{'id':sId,csrfmiddlewaretoken:"{{ csrf_token }}"},
                      cache:false,
                      success:function (msg) {
                          if(msg.result) {
                              layer.alert('操作成功');
                              oDataTable.ajax.reload();
                          } else {
                              layer.alert('操作失败');
                          }
                          return ;
                      }

                   });
               }
           });
        });

        $("#btnEnable").click(function () {
           if ($("input[name='checkList']:checked").length==0) {
               layer.msg('请选择要启用的记录');
               return ;
           }
           var arrID=new Array();
           $("input[name='checkList']:checked").each(function () {
               arrID.push($(this).val());
           });
           sId=arrID.join(',');
           layer.alert('确定要启用吗',{
               title:'提示',
               icon:3,
               time:0,
               btn:["YES","NO"],
               yes:function (index) {
                   layer.close(index);
                   $.ajax({
                      type:'POST',
                      url:"{% url 'system:basic-user-enable' %}",
                      data:{'id':sId,csrfmiddlewaretoken:"{{ csrf_token }}"},
                      cache:false,
                      success:function (msg) {
                          if(msg.result) {
                              layer.alert('启用用户成功',{icon:1});
                              oDataTable.ajax.reload();
                          } else {
                              layer.alert('启用用户失败',{icon:5});
                          }
                          return ;
                      }

                   });
               }
           });
        });

        $("#btnDisable").click(function () {
           if ($("input[name='checkList']:checked").length==0) {
               layer.msg('请选择要启用的记录');
               return ;
           }
           var arrID=new Array();
           $("input[name='checkList']:checked").each(function () {
               arrID.push($(this).val());
           });
           sId=arrID.join(',');
           layer.alert('确定要禁用吗',{
               title:'提示',
               icon:3,
               time:0,
               btn:["YES","NO"],
               yes:function (index) {
                   layer.close(index);
                   $.ajax({
                      type:'POST',
                      url:"{% url 'system:basic-user-disable' %}",
                      data:{'id':sId,csrfmiddlewaretoken:"{{ csrf_token }}"},
                      cache:false,
                      success:function (msg) {
                          if(msg.result) {
                              layer.alert('禁用用户成功',{icon:1});
                              oDataTable.ajax.reload();
                          } else {
                              layer.alert('禁用用户失败',{icon:5});
                          }
                          return ;
                      }

                   });
               }
           });
        });

        function doDelete(id) {
            layer.alert('确定要删除吗',{
               title:'提示',
               icon:3,
               time:0,
               btn:["YES","NO"],
               yes:function (index) {
                   layer.close(index);
                   $.ajax({
                      type:'POST',
                      url:"{% url 'system:basic-user-delete' %}",
                      data:{'id':id,csrfmiddlewaretoken:"{{ csrf_token }}"},
                      cache:false,
                      success:function (msg) {
                          if(msg.result) {
                              layer.alert('删除成功',{icon:1});
                              oDataTable.ajax.reload();
                          } else {
                              layer.alert('删除失败',{icon:5});
                          }
                          return ;
                      }
                   });
               }
            });
        }

        $("#select").change(function () {
           oDataTable.ajax.reload();
        });


    </script>

{% endblock %}
